<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <meta name="wap-font-scale" content="no">
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title><?=$title?></title>
    <link rel="stylesheet" href="/mobile/css/reset.css">
    <link rel="stylesheet" href="/mobile/css/mui.min.css">
    <script src="/mobile/js/flexible_css.debug.js"></script>
    <script src="/mobile/js/flexible.debug.js"></script>
    <link rel="stylesheet" href="/mobile/css/main_train.css">


    <style>
        #test_wrap{

        }
        #test_wrap div.pic-wrap{
            float: left;
            width: calc((10rem - 68px)/4);
            height: calc((10rem - 68px)/4);
            margin-right: 16px;
            margin-top: 10px;
            position: relative;
        }
        #fs-wrap .upload-btn-wrap{
            width: calc((10rem - 68px)/4);
            height: calc((10rem - 68px)/4);
        }
        #test_wrap div.pic-wrap{
            border: 1px solid #a5a5a5;
        }
        span.fs-pic-wrap{
            display: inline-block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        #test_wrap div.pic-wrap img{
            position: absolute;
            width: 100%;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        #test_wrap div.pic-wrap:nth-child(4n+0),#test_wrap span.upload-btn-wrap:nth-child(4n+0){
            margin-right: 0;
        }
        #test_wrap i.btn-delete{
            display: inline-block;
            width: 20px;
            height: 20px;
            position: absolute;
            top: -10px;
            right: -10px;
            z-index: 1;
            background: url("/mobile/img/icon-delete.png") no-repeat;
            background-size: cover;
        }


    </style>

</head>
<body>
<div id="back-btn-wrap">
    <a class="back-btn" href="javascript:history.go(-1)"></a>论坛发帖<a href="javascript:void(0);" class="btn-send">发表</a>
</div>

<div class="content-main">

    <form action="" id="fs-wrap">
        <textarea name="" id="title" placeholder="写个标题吧"></textarea>
        <textarea name="" id="content" placeholder="你想发布的内容"></textarea>
        <div id="test_wrap" class="clearfix" style="display: none;">
            <span class="upload-btn-wrap">
                <input id="uploadBtn" type="file" accept="image/jpg,image/jpeg,image/png" name=img>
            </span>
        </div>

        <input name="token" type="hidden" id="token-wrap">
    </form>
</div>

<script src="/mobile/js/jquery.min.js"></script>
<script src="/mobile/js/common.js"></script>
<script src="/mobile/js/mui.min.js"></script>
<script src="/mobile/js/jrrpc.js"></script>
<script src="/mobile/js/autosize.js"></script>

<script>
    $(function() {
        mui.init();
        var token = iService.getAppParam();
        $("#token-wrap").val(token.token);
//      textarea  高度自适应
        $('textarea').autosize();
        var btn_send = $('.btn-send');
        btn_send[0].addEventListener('tap',function(){
            var title = $('#title').val();
            var content = $('#content').val();
            if(!title){
                mui.alert('标题不能为空',' ');
                return false;
            }else if(!content){
                mui.alert('内容不能为空',' ');
                return false;
            }
            var path = '';
            var file = '';
            $('.pic-wrap').each(function(i){
                path += $(this).attr('data-path')+',';
                file += $(this).attr('data-file')+',';
            });
            path = path.slice(0,path.length-1);
            file = file.slice(0,file.length-1);
            var req = {
                postData:'Society/addPost',
                data:{
                    title:title,
                    content:content,
                    path:path,
                    file:file
                }
            };
            $.extend(req.data,token);
            $.JsonRpc(req,function(result){
                console.log(result);
                mui.alert(result.data.message,' ',function(){
                    location.href = 'societyLists';
//                    window.location.reload();
                });
            });
        });

//      上传图片
        var upload_btn = $('#uploadBtn');
        upload_btn[0].addEventListener('change',function(){
            /*console.log($(this).val());
//          每次图片上传成功后，置空input的值，可以上传相同图片
            $('.upload-btn-wrap').before(
                    '<div class="pic-wrap">'+
                    '<img src="/img/blue.jpg" alt="">'+
                    '<i class="mui-icon mui-icon-minus"></i>'+
                    '</div>'
            );
            $(this).val('');*/

//          About/upload
            var file_form = new FormData($('#fs-wrap')[0]);//提交表单所有数据

            $.ajax({
                type: "post",
//                url: "http://192.168.1.111:8090/v002/About/upload",
//                 url: "http://train.api.livestaring.com/v003/About/upload",
                data: file_form,
                processData:false,
                contentType:false,
                async: true,
                datatype: "JSON",
                beforeSend: function(){
                    var uploading = true;
                    console.log(uploading);
                },
                success: function (obj) {
                    var data = $.parseJSON(obj);
                    console.log(data);
                    if (data.code == 200) {
                        $("#token-wrap").attr({"data-file":data.data.file,"data-path":data.data.path});
//                      var img_src = 'http://192.168.1.111:8092/v001/Default/'+data.data.path+data.data.file;
//                         var img_src = 'http://train.img.livestaring.com/v002/Default/'+data.data.path+data.data.file;
                        $('.upload-btn-wrap').before(
                            '<div class="pic-wrap" data-path="'+data.data.path+'" data-file="'+data.data.file+'">'+
                            '<span class="fs-pic-wrap"><img src="'+img_src+'" alt=""></span>'+
                            '<i class="btn-delete"></i>'+
                            '</div>'
                        );
                    }else if(data.code == 300){
                        mui.alert(data.data.message,' ');
                        return false;
                    }else if(data.code == 400){
                        mui.alert(data.data.message,' ');
                        return false;
                    }else if(data.code == 500){
                        mui.alert(data.data.message,' ');
                        return false;
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    console.log(XMLHttpRequest.readyState);
                    console.log(textStatus);
                    console.log(errorThrown);
                }
            });

            mui('#test_wrap').on('tap','.btn-delete',function(){
                $(this).parent('.pic-wrap').remove();
            });

        });
        $.get('https://www.wzxaini9.cn/api/flow/index/id/11', function (data) {
            console.log($.parseJSON(data));
        })
    });
</script>
</body>
</html>












